<template>
    <div>
        <h2>我是一个组件</h2>
        <h3>{{ name }}</h3>
        <h3>{{ myname }}</h3>

        <button @click="changeFatherName">点击修改父组件</button>

    </div>
</template>

<!-- 注意：lang 语法声明，不要加，除非使用 TS 我们再加！有些提示性的语法 VScode 我们不要太 care -->
<script setup>
import { ref, getCurrentInstance } from "vue";
// 需要注意的是：在 js 中操作 ref 需要加上 name.value 进行操作
const name = ref("前端老兵");

// 在 vue3 中 this 是不推荐使用了，但是，有时候，我们需要使用 this 
// 在 Vue3 我们不在叫 this 实例化对象了，叫上下文
const { ctx } = getCurrentInstance();
console.log(ctx);
// 这里的this是 undefined 为什么？因为 setup 这个生命周期 还在 beforeCreated 之前
// console.log(this);

// 这里可以是对象，也可以直接数组接收，TS 本身的作用就是用来 类型校验
const props = defineProps(["myname"])

const emits = defineEmits(["changeMyname"])

const changeFatherName= () => {
    // 触发父组件传递过来的方法
    emits("changeMyname", "子组件的：前端老兵");
    // ctx.$emit("changeMyname", "子组件的：前端老兵");
}


</script>

<style lang="scss" scoped>

</style>